三明治布局（上下固定中间自适应）

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

三明治布局指的是，页面在垂直方向上，分成三部分：页眉、内容区、页脚。这个布局会根据设备宽度，自动适应，并且不管内容区有多少内容，页脚始终在容器底部。

display: flex

1
2
3
4
5
6
7
8
9
10
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1;
  overflow-y: auto;
}

display: grid

兼容性

MDN Grid_Layout

1
2
3
4
5
6
7
8
9
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

main {
  overflow-y: auto;
}

核心代码是grid-template-rows，指定垂直高度怎么划分，这里是从上到下分成三部分。第一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。

calc()

要求header和footer定高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
  height: 100vh;
}

header {
  height: 50px;
}

main {
  height: calc(100vh - 50px - 50px);
  overflow-y: auto;
}

footer {
  height: 50px;
}

See the Pen CSS-calc-三明治布局 by ly023 (@ly023) on CodePen.

display: table（不推荐）

把三行都看做是表格。

缺点：不灵活，高度设置等受限。

1
2
3
4
5
6
7
8
9
<div class="container">
  <header>...</header>
  <main>
    <div class="scroll">
     ...
    </div>
  </main>
  <footer>...</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
  height: 100vh;
}

.container {
  display: table;
  width: 100%;
  height: 100%;
}

header,
main,
footer {
  display: table-row;
}

main {
  .scroll {
    height: 100%;
    overflow: auto;
  }
}

参考文章

阮一峰：五种 CSS 经典布局